import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:yp/helper.dart';
import 'package:get/get.dart';

import 'logic.dart';
import 'state.dart';

class MyTrafficUsersPage extends StatefulWidget {
  
  @override
  State<StatefulWidget> createState() {
    return _MyTrafficUsersPage();
  }
}
class _MyTrafficUsersPage extends State<MyTrafficUsersPage> {
  final MyTrafficUsersLogic logic = Get.put(MyTrafficUsersLogic());
  final MyTrafficUsersState state = Get.find<MyTrafficUsersLogic>().state;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        elevation: setWidth(1),
        backgroundColor: Colors.white,
        title: Text(
          '我的流量用户',
          style: TextStyle(
            color: Color(0xff030303),
            fontSize: 17,
            fontWeight: FontWeight.bold,
          ),
        ),
        iconTheme: IconThemeData(
          color: Color(0xff030303),
        ),
      ),
      body: GetBuilder<MyTrafficUsersLogic>(
        builder: (logic) {
          return Container(
            color: Color(0xfff5f5f5),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Expanded(
                  child: Container(
                    child: ListView.separated(
                      itemBuilder: (context, index) {
                        return _itemWidget(index: index);
                      },
                      separatorBuilder: (context, index) {
                        return SizedBox(height: setWidth(20));
                      },
                      itemCount: 4,
                    ),
                  ),
                ),
                Container(
                  height: setWidth(120),
                  color: Colors.white,
                  padding: EdgeInsets.symmetric(horizontal: setWidth(60), vertical: setWidth(20)),
                  child: InkWell(
                    onTap: () {
                      print('流量 +添加账户 点击事件！！！！');
                    },
                    child: Container(
                      height: setWidth(80),
                      decoration: BoxDecoration(
                        color: Color(0xffEA5504),
                        borderRadius: BorderRadius.circular(setWidth(40)),
                      ),
                      alignment: Alignment.center,
                      child: Text(
                        '+添加账户',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

  Widget _itemWidget({int index}) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.only(
        left: setWidth(32),
        top: setWidth(24),
        right: setWidth(24),
        bottom: setWidth(48),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Text(
                    '姓名：张三',
                    style: TextStyle(
                      color: Color(0xff222222),
                      fontSize: 14,
                    ),
                  ),
                  SizedBox(width: setWidth(16)),
                  Container(
                    width: setWidth(52),
                    height: setWidth(28),
                    decoration: BoxDecoration(
                      color: Color(0xffea5504),
                      borderRadius: BorderRadius.circular(setWidth(2)),
                    ),
                    alignment: Alignment.center,
                    child: Text(
                      '我家',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 10,
                      ),
                    ),
                  ),
                ],
              ),
              InkWell(
                onTap: () {
                  print('解绑点击事件！！！！  index = $index');
                  showDialog(
                    context: context,
                    useSafeArea: false,
                    builder: (BuildContext context) {
                      return Container(
                        color: Color(0x66030303),
                        child: CupertinoAlertDialog(
                          title: Padding(
                            padding: EdgeInsets.symmetric(vertical: setWidth(20)),
                            child: Text(
                              "您确定要解绑该账户",
                              style: TextStyle(
                                color: Colors.black,
                                fontSize: 18,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                          actions: <Widget>[
                            CupertinoDialogAction(
                              child: Text("取消"),
                              onPressed: () {
                                Get.back();
                                print("取消");
                              },
                            ),
                            CupertinoDialogAction(
                              child: Text("确定"),
                              onPressed: () {
                                Get.back();
                                print("确定");
                              },
                            ),
                          ],
                        ),
                      );
                    },
                  );
                },
                child: Container(
                  width: setWidth(100),
                  height: setWidth(48),
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: Color(0xffcccccc),
                      width: setWidth(1),
                    ),
                    borderRadius: BorderRadius.circular(setWidth(24)),
                  ),
                  alignment: Alignment.center,
                  child: Text(
                    '解绑',
                    style: TextStyle(
                      color: Color(0xff666666),
                      fontSize: 12,
                    ),
                  ),
                ),
              ),
            ],
          ),
          Padding(
            padding: EdgeInsets.only(
              top: setWidth(10),
              bottom: setWidth(14),
            ),
            child: Text(
              '燃气号：265544241441',
              style: TextStyle(
                color: Color(0xff222222),
                fontSize: 14,
              ),
            ),
          ),
          Text(
            '地址：江苏省苏州市花桥国际商务城中信广场4号楼',
            style: TextStyle(
              color: Color(0xff222222),
              fontSize: 14,
            ),
          ),

        ],
      ),
    );
  }

}